<template>
    <div class="loginPwd">
        <p>
            <input type="text" placeholder="请输入手机号" class="inp1" v-model="val1" @focus="focus1"  @blur="inputBlur" name="tel" :class="{phClass: inputFocusName == 'tel'}">
        </p>
        <p>
            <input :type="inputtype" placeholder="请输入密码" class="inp2" v-model="val2" @focus="focus2" @keyup.enter="login" @blur="inputBlur" name="password" :class="{phClass: inputFocusName == 'password'}">
            <img src="../../assets/img/登陆注册/登录/3.png" alt="" @click="showPas">
        </p>
        <button @click="login">登陆</button>
        <p>
            <img src="../../assets/img/登陆注册/登录/√2.png" alt="" v-if="show" @click="toggle">
            <img src="../../assets/img/登陆注册/登录/√.png" alt="" v-if="!show" @click="toggle">
            <span @click="toggle">下次自动登陆</span>
            <a href="javascript:;" @click="$router.push({path:'/findpassword'})">忘记密码？</a>
        </p>
    </div>
</template>
<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      show: true,
      val1: "",
      val2: "",
      //   手机号正则
      reg: /^[1][3,4,5,7,8][0-9]{9}$/,
      //   密码正则 6-16位字母+数字
      reg2: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
      // input输入框的类型
      inputtype: "password",
      inputFocusName: '',
    };
  },
  methods: {
    showPas() {
      this.inputtype == "password"
        ? (this.inputtype = "text")
        : (this.inputtype = "password");
    },
    toggle() {
      this.show = !this.show;
    },
    login() {
      // alert(md5(this.val2))
      if (this.val1 == "") {
        this.$message.error("手机号不能为空");
      } else if (!this.reg.test(this.val1)) {
        this.$message.error("手机号格式不对");
        this.val1 = "";
      } else if (this.val2 == "") {
        this.$message.error("密码不能为空");
      } else if (!this.reg2.test(this.val2)) {
        this.$message.error("密码6-16位字母加数字");
        this.val2 = "";
      } else {
        this.$ajax
          .post(this.Ipurl + "user/login", {
            mobile: this.val1,
            password: md5(this.val2)
          })
          .then(res => {
            // console.log(res.data);
            this.result = res.data.dataInfo;
            if (res.data.returnCode == 1005) {
              this.$message.error("sorry！用户密码错误");
              // this.val1 = "";
              this.val2 = "";
            } else {
              if (this.show) {
                // 将手机号存入localstorage中
                window.localStorage.setItem("mobile", this.result.mobile);
                // 为了安全性建议不要保存密码
                window.localStorage.setItem("password", this.val2);
              }
              // mobile,token,userId存入sessionstorage中。
              this.userInfo.mobile = this.result.mobile;
              this.userInfo.token = this.result.token;
              this.userInfo.userId = this.result.userId;
              window.sessionStorage.setItem(
                "userInfo",
                JSON.stringify(this.userInfo)
              );
              this.$router.push({ path: "/personal" });
            }
          });
      }
    },
    focus1(e) {
      this.$message("请输入真实的11位手机号");
      this.inputFocusName = e.target.name;
    },
    focus2(e) {
      this.$message("请输入6-16位数字+字母的密码");
      this.inputFocusName = e.target.name;
    },
    inputBlur(){
      this.inputFocusName = '';
    }
  },
  mounted() {
    // 自动登录取出来mobile，password
    if (
      window.localStorage.getItem("mobile") ||
      window.localStorage.getItem("password")
    ) {
      this.val1 = window.localStorage.getItem("mobile");
      this.val2 = window.localStorage.getItem("password");
      // 1.5s自动登录
      setTimeout(this.login, 1500);
    }
  }
};
</script>
<style scoped>
.loginPwd {
  margin-top: 60px;
}
.loginPwd > p > input {
  width: 100%;
  height: 48px;
  padding-left: 20px;
  font-size: 16px;
  color:gray;
  border: 1px solid gray;
  border-radius: 5px;
}
input::-webkit-input-placeholder{
            color: #c6c6c6;
        }
.loginPwd > p:nth-child(2) {
  position: relative;
}
.loginPwd > p:nth-child(2) > img {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
}
.loginPwd > button {
  width: 100%;
  height: 50px;
  margin-top: 30px;
  color: #fff;
  background: rgb(237, 64, 64);
  font-size: 18px;
  border-radius: 5px;
}
.loginPwd > p:nth-child(2) {
  margin-top: 30px;
}
.loginPwd > p:nth-child(4) {
  margin-top: 30px;
}
.loginPwd > p:nth-child(4) > span {
  font-size: 18px;
  color: rgb(34, 34, 34);
  cursor: pointer;
}
.loginPwd > p:nth-child(4) > img {
  cursor: pointer;
  margin-left: 5px;
  margin-top: -5px;
}
.loginPwd > p:nth-child(4) > a {
  float: right;
  font-size: 18px;
  color: rgb(204, 204, 204);
}


.phClass::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: transparent
}
.phClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent
}
.phClass::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent
}
.phClass:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent
}
</style>


